/**
 * 线条设置
 */
function scLineSetting(){
    var com = scCommon.instance();
    var crEle = com.crEle;

    var lines = [
        {label: "直线A", style: {lineWidth: 1, color: "#000"}},
        {label: "直线B", style: {lineWidth: 2, color: "#000"}},
        {label: "直线C", style: {lineWidth: 3, color: "#000"}},
        {label: "虚线1", style: {lineWidth: 1, lineDash:[2, 5], color: "#000"}},
        {label: "虚线2", style: {lineWidth: 1, lineDash:[4, 5], color: "#000"}},
        {label: "虚线3", style: {lineWidth: 1, lineDash:[6, 5], color: "#000"}}
    ];

    var box = null;
    
    /**
     * 创建视图
     * @param {*} option 
     * @returns 
     */
    this.createView = function(option){
        box = crEle(null, "sc-line-setting");

        for(let i = 0; i < lines.length; i++){
            box.appendChild(createBlock(lines[i], lines, option));
        }

        var more = crEle(null, "sc-setting-more");
        more.innerText = "自定义线条...";
        box.appendChild(more);

        more.addEventListener("click", (e)=>{
            if(option.showDialog){
                option.showDialog(getDetailSetting());
            }
        });

        return box;
    }

    /**
     * 创建选择块
     * @param {*} item 
     * @param {*} list
     * @param {*} option
     */
    var createBlock = function(item, list, option){
        var block = crEle(null, "sc-setting-block");
        var preview = crEle(null, "sc-setting-preview");
        var detail = crEle(null, "sc-setting-detail");
        var line = crEle(null, "sc-setting-line");
        var title = crEle(null, "sc-setting-title");

        title.innerText = item.label;

        line.style.height = item.style.lineWidth + "px";
        
        if(item.style.lineDash){
            line.classList.add("dashed");
            let lineDash = [];
            for(let i in item.style.lineDash){
                lineDash.push(item.style.lineDash[i] + "px");
            }
            line.style.backgroundSize = lineDash.join(" ");
        }else{
            line.classList.add("solid");
        }

        preview.appendChild(line);

        detail.appendChild(title);

        block.appendChild(preview);
        block.appendChild(detail);

        item.element = block;

        block.addEventListener("mousedown", (e)=>{
            if(!option.triggerListener) return;

            let item = list.find(it=>it.element === e.currentTarget);

            if(option.triggerListener){
                let param = {...item.style};
                option.triggerListener(param);
            }
        });

        return block;
    }

    /**
     * 获取详细设置页面
     * @param {*} option
     * @returns 
     */
    var getDetailSetting = function(){
        return {
            label: "线条设置",
            component: detail()
        };
    }

    /**
     * 明细组件
     * @param {*} opt
     */
    var detail = function(opt){
        opt = opt ? opt : {};

        var box = null;
        var data = opt.data ? opt.data : {};

        this.createView = function(option){
            option = option ? option : {};
            box = crEle(null, "sc-line-setting-detail");

            var list = [
                { label: "线条粗细", type: "component", component: "scNumber",
                    param: {name: "lineWidth", minNum: 1, maxNum: 10, value: 1} 
                },
                { label: "线条颜色：", value: "color", type: "dropdown", display:"color", component: "scColorpickerSetting",
                    param: {color: "#000"}
                },
                { label: "间隔设置：", value:"lineDash", type: "input", placeholder: "一组描述交替绘制线段和间距的数字，例如5,5"},
            ];

            com.insertNode(list, data, box, "sc-line-setting-row");

            return box;
        }

        this.getData = function(){
            return new Promise((resolve)=>{
                com.getData(box).then((d)=>{
                    let data = {...d};
                    if(data.lineDash){
                        data.lineDash = data.lineDash.split(",");
                    }
                    resolve(data);
                })
            });
        }

        return this;
    };
}